<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
    <style>
        a[disable]{ opacity:0.5; cursor:default; pointer-events:none}
    </style>
      <script>
  $(function(){

	  
	  });
  var countdown=5;

  function settime() {

          var code = $('#code');
          if (countdown == 0) {
                code.removeAttr('disable');
              code.text("获取验证码");
              countdown = 5;
              return;
          } else {
              code.text("重新发送(" + countdown + ")");
              code.attr('disable',true);
              countdown--;
          }
      setTimeout('settime()', 1000);

  }
  
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
    <div class="weui_cells_title">表单</div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">qq</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
                </div>
            </div>
            
            <div class="weui_cell weui_vcode">
                <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" placeholder="请输入验证码"/>
                </div>
                <div class="weui_cell_ft">
                    <a href="javascript:settime();" class="weui-vcode-btn" id="code">获取验证码</a>
                </div>
            </div>
            
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">银行卡</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入银行卡号"/>
                </div>
            </div>
            
            <div class="weui_cell weui_vcode weui_cell_warn">
                <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" placeholder="请输入验证码"/>
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                    <img src="../images/vcode.jpg" />
                </div>
            </div>
            
   
          <div class="weui_cell weui_cell_warn">
                <div class="weui_cell_hd"><label for="" class="weui_label">卡号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>   
            
                   <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">日期</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="date" value=""/>
                </div>
            </div>
            
            
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">时间</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="datetime-local" value="" placeholder=""/>
                </div>
            </div>
            
            
                  <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="weui_uploader">
                        <div class="weui_uploader_hd weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">图片上传</div>
                            <div class="weui_cell_ft">0/2</div>
                        </div>
                        <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files">
                                <li class="weui_uploader_file" style="background-image:url()"></li>
                                <li class="weui_uploader_file" style="background-image:url()"></li>
                                <li class="weui_uploader_file" style="background-image:url()"></li>
                                <li class="weui_uploader_file weui_uploader_status" style="background-image:url()">
                                    <div class="weui_uploader_status_content">
                                        <i class="weui_icon_warn"></i>
                                    </div>
                                </li>
                                <li class="weui_uploader_file weui_uploader_status" style=")">
                                    <div class="weui_uploader_status_content">50%</div>
                                </li>
                            </ul>
                            <div class="weui_uploader_input_wrp">
                                <input class="weui_uploader_input" type="file" accept="image/*" multiple />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                  
        </div>
 
  <div class="weui_cells_title">文本框</div>
 <div class="weui_cells">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" placeholder="请输入文本" type="text">
                </div>
            </div>
        </div>  
        
        <div class="weui_cells_title">文本域</div>     
<div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea id="textarea" class="weui_textarea" placeholder="请输入文本" rows="3"></textarea>
                    <div class="weui_textarea_counter"><span id='count'>0</span>/<span id='count_max'>20</span></div>
                </div>
            </div>
        </div>
          <script>
$(function(){
  var max = $('#count_max').text();
  $('#textarea').on('input', function(){
     var text = $(this).val();
     var len = text.length;   
     $('#count').text(len);    
     if(len > max){
       $(this).closest('.weui_cell').addClass('weui_cell_warn');
     }
     else{
       $(this).closest('.weui_cell').removeClass('weui_cell_warn');
     }     
  });
})
</script>       
 
  <div class="weui_cells_title">复合选择输入框</div>
 <div class="weui_cells">
                 <div class="weui_cell weui_cell_select weui_select_before">
                <div class="weui_cell_hd">
                    <select class="weui_select" name="select2">
                        <option value="1">+86</option>
                        <option value="2">+80</option>
                        <option value="3">+84</option>
                        <option value="4">+87</option>
                    </select>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
                </div>
            </div>
        </div>

<div class="weui_cells_title">选择</div>
<div class="weui_cells">
            <div class="weui_cell weui_cell_select">
                <div class="weui_cell_bd weui_cell_primary">
                    <select class="weui_select" name="select1">
                        <option selected="" value="1">微信号</option>
                        <option value="2">QQ号</option>
                        <option value="3">Email</option>
                    </select>
                </div>
            </div>
            <div class="weui_cell weui_cell_select weui_select_after">
                <div class="weui_cell_hd">
                    <label for="" class="weui_label">国家/地区</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <select class="weui_select" name="select2">
                        <option value="1">中国</option>
                        <option value="2">美国</option>
                        <option value="3">英国</option>
                    </select>
                </div>
            </div>
        </div>        


<label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" class="weui-agree-checkbox" type="checkbox">
            <span class="weui-agree-text">
                阅读并同意<a href="javascript:void(0);">《相关条款》</a>
            </span>
        </label>
        
                               
        <div class="weui_cells_tips">底部说明文字底部说明文字</div>
        
        <div class="weui_btn_area">
            <a class="weui_btn weui_btn_primary" href="javascript:" id="btn">确定</a>
        </div>  

<div class="weui_cells_tips">emptyTips检测空,notMatchTips正则,没有时候tips,最后placeholder,4种提示</div>
<form id="form">
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="tel" required pattern="[0-9]{11}" maxlength="11" placeholder="输入你现在的手机号" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号">
            </div>
            <div class="weui_cell_ft">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        <div class="weui_cell weui_vcode">
            <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" required 
                       placeholder="点击验证码更换" tips="请输入验证码">
            </div>
            <div class="weui_cell_ft">
                <i class="weui_icon_warn"></i>
                <a href="javascript:;" class="weui-vcode-btn">获取验证码</a>
            </div>
        </div>
    </div>
    <div class="weui_btn_area">
        <a id="formSubmitBtn" href="javascript:" class="weui_btn weui_btn_primary">提交</a>
    </div>
</form>
<script>
var $form = $("#form");
$form.form();
$("#formSubmitBtn").on("click", function(){
    $form.validate(function(error){
        if(error){
            
        }else{
            
            $.toptips('验证通过提交','ok');
        }
    });
    
});
</script>
</body>
</html>
